<template>
  <div id="app">
    <Navbar :searchQuery="searchQuery" @search="handleSearch" />
    
    <router-view />
    
    <Footer />
    
    <!-- 加载中遮罩 -->
    <div v-if="isLoading" class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50">
      <div class="p-6 bg-white rounded-lg shadow-lg">
        <div class="flex items-center">
          <div class="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-primary mr-4"></div>
          <span class="text-lg font-medium">加载中...</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { computed, watch } from 'vue';
import { useStore } from 'vuex';
import { useRouter } from 'vue-router';

export default {
  setup() {
    const store = useStore();
    const router = useRouter();
    
    // 获取状态
    const searchQuery = computed(() => store.state.searchQuery);
    const isLoading = computed(() => store.state.isLoading);
    
    // 监听搜索查询变化，跳转到搜索页面
    watch(searchQuery, (newQuery) => {
      if (newQuery) {
        router.push({ name: 'search' });
      }
    });
    
    // 处理搜索
    const handleSearch = (query) => {
      store.dispatch('setSearchQuery', query);
    };
    
    return {
      searchQuery,
      isLoading,
      handleSearch
    };
  }
};
</script>

<style scoped>
#app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
</style>
